<template>
	<view class="pages">
		<view class="container">
			<view class="content">
				<com-head textTit="我的订单" :typeVal="1" :scrollTop="scrollTop"></com-head>
				
				<u-tabs :list="tabList" :is-scroll="false" active-color="#007664" bg-color="" :current="tabCurrent" @change="tabChange"></u-tabs>
				
				<view class="tabList">
					<view class="list"  @click="chiose(ele,index)" v-if="tabCurrent == 0"
					:class="activeIndex == index ? 'active' : '' "
					v-for="(ele,index) in list" :key="index">{{ele.title}}</view>
					
					<view class="list"  @click="chiose(ele,index)" v-if="tabCurrent == 1"
					:class="activeIndex == index ? 'active' : '' "
					v-for="(ele,index) in shopList" :key="index">{{ele.title}}</view>
				</view>
				
				<view class="orderWrap" v-if="orderList.length">
					<view class="item" v-for="(ele,index) in orderList" :key="index">
						<view class="head">
							<text class="projectName">{{ele.goods.length ?'商品购买' : '项目购买'}}</text>
							<!-- cecalStatus 取消灰色类名 红色  status-->
							<text class="status">
								{{getStatusText(ele.status)}}
							</text>
						</view>
						<!-- 购买商品时 -->
						<view class="projectInfo" v-if="ele.goods.length" @click="consumption(ele, 1)">
							<view class="" v-for="(item,index1) in ele.goods" :key="index1">
								<view class="left">
									<image :src="item.goods_images[0]" mode=""></image>
									<view class="info">
										<view class="itemName">{{item.goods_name}}</view>
										<view class="bottom" :class="ele.address.code ? 'noBottom' : ''">
											<text class="num">x {{item.number}}</text>
										</view>
										<view class="pls">
											<view>{{item.sku_text}}</view>
										</view>
										<view class="itemPrice"><text>¥</text>{{item.orders_payable}}</view>
										<!-- 评价 -->
										<view class="extraTime" @click="evaluate(item, 1)" v-if="ele.status == 4 && tabCurrent == 1">评价</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 购买项目时 -->
						<view class="projectInfo" v-else @click="consumption(ele, 2)">
							<view class="left" v-for="(item,index1) in ele.project" :key="index1" >
								<image :src="item.project_images[0]" mode=""></image>
								<view class="info">
									<view class="itemName">{{item.project_name}}</view>
									<view class="bottom" :class="ele.status == 10 ? 'noBottom' : ''">
										<text class="num">x {{item.number}}</text>
									</view>
									<view class="pls">
										<view>套餐次数：{{item.use_num}}次</view>
										<view>购买门店：{{ele.store.title || '-'}}</view>
									</view>
									<view class="itemPrice">
										<text>¥</text>{{item.orders_payable}}
										<text v-if="ele.status == 10 && item.add_clock > 0" class="addTime">加钟数：{{item.add_clock}}</text>
									</view>
									<!-- 加钟 -->
									<view class="extraTime" @click.stop="extraTime(ele)" v-if="ele.status == 10">加钟</view>
								</view>
							</view>
						</view>
						
						<view class="checkCode">
							<view class="stores" v-if="ele.address.code && ele.goods.length"><text>核验码：</text>{{ele.address.code}}</view>
							<view class="stores" v-if="ele.status == 10 && ele.project.length"><text>核验码：</text>{{ele.check_code}}</view>
							<view class="stores" v-if="ele.status == 10 && ele.project.length"><text>
								使用次数：
								</text>{{(ele.project.use_num - ele.project.remain_num) > 0 ? (ele.project.use_num - ele.project.remain_num) : 0}} 次
								（余：{{ele.project[0].remain_num}}次待使用）
							</view>
							<!-- <view class="stores"><text>取消金额：</text>模拟数据</view>
							<view class="stores"><text>取消原因：</text>模拟数据</view>
							<view class="stores"><text>申请时间：</text>模拟数据</view>
							<view class="stores"><text>取消编号：</text>模拟数据</view> -->
						</view>
						<!-- 底部操作按钮 -->
						<view class="operation">
							<view class="left">
								实付金额 ：<text>¥{{ele.orders_payable}}</text>
							</view>
							<view class="operationBtn">
								<!-- 4 -->
								<!-- make 开票-->
								<!-- &&(ele.pay_type == 2||ele.pay_type == 3||ele.pay_type == 4||ele.pay_type == 5) &&(ele.status == 4 || ele.status == 8) -->
								
								<!-- 隐藏开票 -->
								<!-- <view class="common border" @click="makeInvoice(ele)"  
								v-if="ele.is_invoice == 0 &&(ele.status == 4 || ele.status == 8)">开票</view>
								<view class="common border" v-if="ele.is_invoice == 1 &&(ele.status == 4 || ele.status == 8)">开票中</view>
								<view class="common border" @click="lookInvoice(ele)"
								v-if="ele.is_invoice == 2 &&(ele.status == 4 || ele.status == 8)">查看开票</view> -->
								
								<!-- 评价 -->
								<view class="common border" @click="evaluate(ele, 2)" v-if="ele.status == 4 && tabCurrent == 0">评价</view>
								
								<!-- 再来一单 -->
								<view class="common border" @click="recur(ele)" v-if="ele.status == 4">再来一单</view>
								
								<!-- 已预约、预约 -->
								<!-- <view class="common"  v-if="ele.status == 10" @click="makeInfo(ele)" :class="ele.is_reserve == 1 ? 'border' : ''">
									{{ele.is_reserve == 1 ? '已预约' : '预约'}}
								</view> -->
								
								<!-- 退货 -->
								<view class="common" @click="salesReturn(ele)" v-if="ele.status == 6 && ele.return_type == 2">退货</view>
								
								<!-- 退款 -->
								<view class="common" @click="refund(ele)" v-if="ele.status == 2 || ele.status == 3 || (ele.status == 10 && ele.is_reserve == 0)">退款</view>
								
								<!-- 3 确认收货  && ele.goods.length && ele.address.address_type == 1-->
								<view class="common border" @click="confirmReceipt(ele)"  v-if="ele.status == 3">确认收货</view>
								
								
								<!-- 倒计时 -->
								<!--  v-if="ele.status == 1 && ((ele.time_out - (new Date().getTime())/1000) > 0)" -->
								<view class="common" v-if="ele.status == 1 && ((ele.time_out - (new Date().getTime())/1000) > 0)" @click="payFun(ele)">
									<text class="commonPay">去支付</text> 
									<u-count-down v-if="((ele.time_out - (new Date().getTime())/1000) > 0)" :timestamp="(ele.time_out - (new Date().getTime())/1000) || 0" :bg-color="transparent" :color="white" :separator-color="white"></u-count-down>
								</view>
									
							</view>
						</view>
						<view class="courierNumber" v-if="ele.logistics_no != null">
							快递单号 ：<text>{{ele.logistics_no}}</text>
						</view>
					</view>
					<u-loadmore margin-top="60" margin-bottom="50" :status="status" />
				</view>
				<!-- 没有数据时 -->
				<view class="noDate" v-else>
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" mode=""></image>
					<view>暂无订单数据~</view>
				</view>
			</view>
		</view>
		
		<!-- 呼叫按钮 -->
		<view class="league" v-if="isCallObj.status && isCallObj.status != 0">
			<view v-if="isCallObj.status == 1" @click="plFun(1)">呼叫</view>
			<view v-if="isCallObj.status == 2" @click="plFun(2)">已到达</view>
		</view>
		
		<!-- 退款弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="12" @close="popClose" :closeable="true">
			<view class="popupWrap">
				<view class="returnList">
					退款金额 :￥{{params.return_money}}
				</view>
				<view class="returnList" @click="reasonShow = true">
					推荐原因 :&nbsp; 快捷输入<uni-icons type="right" class="uniPls" size="18"></uni-icons>
				</view>
				<view class="returnList" @click="refundShow = true">
					退款类型 :&nbsp; {{params.return_name ? params.return_name : '请选择'}}<uni-icons type="right" class="uniPls" size="18"></uni-icons>
				</view>
				<view class="returnList">
					退款原因
				</view>
				<textarea v-model="params.return_remark" placeholder="请输入退款原因" placeholder-style="font-size:26rpx"/>
				<view class="button" @click="submit">确定</view>
			</view>
		</u-popup>
		
		<!-- 发票 -->
		<u-popup v-model="invoiceShow" safe-area-inset-bottom mode="bottom" border-radius="40" @close="close" closeable>
			<view class="specification">
				<view class="close" @click="close">
					<text class="iconfont icon-guanbi"></text>
				</view>
				
				<view class="main">
					<view class="main__header">申请发票</view>
					
					<view class="main__tou">发票类型：</view>
					<radio-group @change="radioChange" style="margin-top: 10rpx;">
						<label class="uni-list-cell uni-list-cell-pd">
							<radio value="1" :checked="current == 1" style="transform:scale(0.7)"/>
							<text>个人发票</text>
						</label>
						<label class="uni-list-cell uni-list-cell-pd" style="margin-left: 30rpx;">
							<radio value="2" :checked="current == 2" style="transform:scale(0.7)"/>
							<text>企业发票</text>
						</label>
					</radio-group>
					
					<view class="main__tou">发票抬头：</view>
					<u-input v-model="pls.invoice_title" placeholder="请输入发票抬头" :type="type" :border="border" />
					<view class="main__tou">纳税人识别号：</view>
					<u-input v-model="pls.invoice_taxpayer" placeholder="请输入纳税人识别号" :type="type" :border="border" />
					
				</view>
				
				<view class="subimt">
					<view @click="invoiceClose()" class="cancel">取消</view>
					<view @click="invoiceConfirm()" class="confirm">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 退货弹窗 -->
		<u-popup v-model="salesShow" mode="center" border-radius="12" @close="popClose" :closeable="true">
			<view class="popupWrap mtc30">
				<view class="returnList">
					物流单号 : <u-input v-model="logParams.return_logistics_no" placeholder="请输入物流单号" :type="type" :border="border" />
				</view>
				<view class="returnList">
					发货人手机 :&nbsp; <u-input v-model="logParams.return_sender" placeholder="请输入发货人手机" :type="type" :border="border" />
				</view>
				<view class="returnList" @click="logisticsShow = true">
					物流公司 :&nbsp; {{logParams.return_logistics_name ? logParams.return_logistics_name : '请选择'}}<uni-icons type="right" class="uniPls" size="18"></uni-icons>
				</view>
				<view class="button" @click="salesSubmit">确定</view>
			</view>
		</u-popup>
		
		<!-- 退款原因 -->
		<u-select v-model="reasonShow" value-name="id" label-name="content" :list="reasonList" @confirm="pickerConfirm"></u-select>
		
		<!-- 退款类型 -->
		<u-select v-model="refundShow" :list="lists" @confirm="refundConfirm"></u-select>
		
		<!-- 物流公司 -->
		<u-select v-model="logisticsShow" value-name="cp_code" label-name="name" :list="logisticsList" @confirm="logisticsConfirm"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isCallObj:{},
				salesShow: false,
				logisticsShow: false,
				logisticsList: [],
				lists: [{
					value: '1',
					label: '退款'
				},
				{
					value: '2',
					label: '退货退款'
				}],
				refundShow: false,
				show:false,
				status:'loading',
				total:0,
				page:1,
				list:[{title:"全部",status:0},{title:"待付款",status:1},{title:"待消费",status:10},{title:"已完成",status:4},{title:"已过期",status:11}],
				shopList:[{title:"全部",status:0},{title:"待付款",status:1},{title:"待发货",status:2},{title:"待收货",status:3},{title:"已完成",status:4},{title:"售后",status:6}],
				activeIndex:0,
				orderList:[],
				current: 1,
				tabList: [{
					name: '项目订单'
				}, {
					name: '商品订单'
				}],
				tabCurrent: 0,
				pls:{
					invoice_type: 1,
					invoice_title: '',
					invoice_taxpayer: '',
					id: ''
				},
				invoiceShow: false,
				type:0,
				params:{
					id:'',
					return_money:'',
					return_remark:'',
					cancel_remark: '',
					return_type: '',
					return_name: ''
				},
				logParams:{
					orders_id:'',
					return_logistics_no: '',
					return_sender: '',
					return_logistics_code: '',
					return_logistics_name: ''
				},
				timer: 0,
				timeData:{},
				scrollTop: 0,
				eleItem: {},
				reasonList: [],
				reasonShow: false,
				fromType: false
			}
		},
		onPageScroll(e){
			// console.log(333, e)
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.total > this.orderList.length) {
				this.page++;
				this.getOrderList();
			}
		},
		async onLoad({status}) {
			this.timer = (new Date().getTime() + 10* 60 * 1000) - (new Date().getTime())
			console.log(33, this.timer)
			
			if(status){
				this.orderList=[]
				this.type = status
				if(this.type == 1){
					this.activeIndex = 1
				}else{
					this.activeIndex = 2
				}
			}
		},
		onShow() {
			// 是否推荐项目  重置
			this.$u.vuex("isRecommend", "")
			this.$u.vuex("makeDays", "")
			this.$u.vuex("makeTime", "")
			
			this.page=1
			this.orderList = []
			this.getOrderList()
			this.getCancel()
			this.isCall()
		},
		methods: {
			async isCall() {
				let {data,code} = await this.$u.api.isCall();
				if (code){
					this.isCallObj = data
				}
			},
			async plFun(type) {
				if (type == 1) {
					let {data,code} = await this.$u.api.userCall({id: this.isCallObj.id});
					if (code){
						this.utlis.Toast("呼叫成功")
						this.isCall()
					}
				} else {
					let {data,code} = await this.$u.api.completeCall();
					if (code){
						this.utlis.Toast("已到达")
						this.isCall()
					}
				}
			},
			async salesSubmit() {
				if(!this.logParams.return_logistics_no){
					this.utlis.Toast("请输入物流单号")
					return
				}
				if(!this.logParams.return_sender){
					this.utlis.Toast("请输入发货人手机")
					return
				}
				if(!this.logParams.return_logistics_code){
					this.utlis.Toast("请选择物流公司")
					return
				}
				if (this.fromType) return
				this.fromType = true
				let {data,code} = await this.$u.api.setUserLogistics(this.logParams);
				this.fromType = false
				if(code){
					this.utlis.Toast('申请成功',"success")
					setTimeout(()=>{
						this.page = 1
						this.orderList=[]
						this.getOrderList()
						this.salesShow = false
					}, 500)
				}
			},
			logisticsConfirm(e) {
				console.log(88, e)
				this.logParams.return_logistics_name = e[0].label
				this.logParams.return_logistics_code = e[0].value
			},
			async salesReturn(row) {
				let {data,code} = await this.$u.api.getLogistics();
				this.logisticsList = data
				this.salesShow = true
				this.logParams.orders_id = row.id
				if (row.return_logistics_code){
					this.logParams.return_logistics_no = row.return_logistics_no
					this.logParams.return_sender = row.return_sender
					this.logParams.return_logistics_code = row.return_logistics_code
					this.logParams.return_logistics_name = row.return_logistics_name
				}
			},
			popClose() {
				console.log(661)
				this.params.return_type = ''
				this.params.return_name = ''
				this.params.id = ''
				this.params.return_money = ''
				this.params.return_remark = ''
			},
			refundConfirm(e){
				console.log(6567,  e)
				this.params.return_type = e[0].value
				this.params.return_name = e[0].label
			},
			tabChange(index) {
				this.type = 0
				this.activeIndex = 0
				
				this.tabCurrent = index;
				this.page = 1
				this.orderList=[]
				this.getOrderList()
			},
			// 再来一单
			recur(ele) {
				console.log(77, ele)
				if(ele.goods.length){ // 商品
					this.utlis.goUrl(`/pages/shop/shopInfo?goods_id=${ele.goods[0].goods_id}&recur=1`)
				}else{ // 项目
					this.utlis.goUrl(`/pages/reserve/reserve?id=${ele.project[0].id}`)
				}
			},
			// 评价
			evaluate(ele, type) {
				console.log(788, ele)
				if(type == 1){ // 商品 
					this.utlis.goUrl(`/pages/order/shopEvaluate?id=${ele.id}`)
				}else{ // 项目
					this.utlis.goUrl(`/pages/order/projectEvaluate?id=${ele.project[0].id}`)
				}
			},
			pickerConfirm(e) {
				console.log(565, e)
				this.params.return_remark = e[0].label
			},
			// 获取取消原因
			async getCancel (){
				let {data,code} = await this.$u.api.getCancel();
				this.reasonList = data
			},
			extraTime(row) {
				this.jump('/pages/order/extraTime?id='+ row.id)
			},
			lookInvoice (row) {
				 uni.downloadFile({
					url: row.invoice_file,
					success: (data) => {
						uni.saveFile({
							tempFilePath: data.tempFilePath, //临时路径
							success: function(res) {
								uni.openDocument({
									showMenu: true,
									filePath: res.savedFilePath,
								});
							}
						});
					}
				});
			},
			radioChange (e) {
				console.log(7, e)
				this.current = e.detail.value
				this.pls.invoice_type = +e.detail.value
			},
			async invoiceConfirm () {
				this.pls.id = this.eleItem.id
				console.log(11, this.pls)
				
				if (this.pls.invoice_title == '') return this.utlis.Toast('请输入发票抬头')
				if (this.pls.invoice_taxpayer == '') return this.utlis.Toast('请输入纳税人识别号')
				
				let {data,code} = await this.$u.api.orderInvoicing(this.pls);
				if(code){
					this.utlis.Toast('申请发票成功')
					this.page=1
					this.orderList = []
					this.getOrderList()
					this.invoiceClose()
				}
			},
			invoiceClose() {
				this.pls.invoice_type = 1
				this.pls.invoice_title = ''
				this.pls.invoice_taxpayer = ''
				this.pls.id = ''
				this.invoiceShow = false
			},
			consumption(ele, type) {
				if (ele.status != 10) return
				this.jump('/pages/mine/submitSuccessT?id='+ ele.id + '&type=' + type + '&is_single=' + ele.is_single)
			},
			payFun(ele) {
				// peoject_id=51
				console.log(65, ele)
				if (ele.project[0] && ele.project[0].project.relation_id > 0) {
					this.$u.vuex("isRecommend", "1")
				} else {
					this.$u.vuex("isRecommend", "")
				}
				this.jump('/pages/shop/projectOrder?out_trade_no=' + ele.out_trade_no + '&orderId=' + ele.id +'&isShop=' + (ele.goods.length ? 1 : 0))
			},
			//开始
			start() {
				this.$refs.countDown.start();
			},
			// 暂停
			pause() {
				this.$refs.countDown.pause();
			},
			// 重置
			reset() {
				this.$refs.countDown.reset();
			},
			onChange(e) {
				console.log(11, e)
				this.timeData = e
			},
			// 获取订单状态
			getStatusText(val){
				switch(val){
					case 1 :
					return '待付款'
					case 2 :
					return '待发货'
					case 3 :
					return '待收货'
					case 4 :
					return '已完成'
					case 5 :
					return '已取消'
					case 6 :
					return '退款中'
					case 7 :
					return '已退款'
					case 8 :
					return '已评价'
					case 9 :
					return '部分退款'
					case 10 :
					return '待消费'
				}
			},
			// 开票
			makeInvoice(ele){
				if(ele.isEnd){
				  this.utlis.Toast('此次消费开票有效期为30天')
				  return	
				}
				this.eleItem = ele
				console.log(ele,"11111111")
				this.invoiceShow = true
				// this.utlis.goUrl(`/pages/mine/applyInvoice?ids=${ele.id}&price=${ele.orders_payable}&company_id=${ele.store.company_id}`)
				// this.utlis.Toast('开发中...')
			},
			// 确认收货
			async confirmReceipt(ele){
				console.log(ele)
				uni.showModal({
				    title: '提示',
				    content: '您确定要确认收货？',
				    success: async (res) => {
				        if (res.confirm) {
				            let {data,code} = await this.$u.api.confirmReceipt({id:ele.id});
				            if(code){
								// ele.status = 4
								this.utlis.Toast('收货成功',"success")
								
								this.page = 1
								this.orderList=[]
								this.getOrderList()
				            }
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			// 预约
			makeInfo(ele){
				if(ele.is_reserve == 1)return
				this.$u.vuex("chioseProjects",[])
				this.$u.vuex("makeProject",[])
				this.$u.vuex("makeTech",[])
				this.$u.vuex("makeNum","")
				let arr = []
				ele.project.forEach((ele)=>{
					arr.push(ele.project)
				})
				this.$u.vuex("makeProject",arr)
				this.$u.vuex("makeStoreInfo",ele.store)
				this.utlis.goUrl(`/pages/reserve/reserve?out_trade_no=${ele.out_trade_no}`)
			},
			// 退款
			refund(ele){
				this.params={
					id:ele.id,
					return_money:ele.orders_payable,
					return_remark:'',
				}
				this.show = true
			},
			// 提交退款
			async submit(){
				if(!this.params.return_remark){
					this.utlis.Toast("请输入退款原因")
					return
				}
				let {data,code} = await this.$u.api.returnOrders(this.params);
				if(code){
					this.utlis.Toast('退款成功',"success")
					this.page = 1
					this.orderList=[]
					this.getOrderList()
					this.show = false
				}
			},
			// 获取订单列表
			async getOrderList(){
				uni.showLoading({title: '加载中'})
				let {data,code} = await this.$u.api.getOrders({status:this.type,page:this.page,is_market: this.tabCurrent});
				uni.hideLoading();
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.orderList = [...this.orderList, ...data.data];
					this.orderList.forEach((ele)=>{
						ele.isEnd = false
						if(ele.pay_time){
							// 起止时间
							let presentTime = Date.parse(new Date()) / 1000
							// 截止时间
							var date = new Date(ele.pay_time)
							var time = new Date(date.setDate(date.getDate() + 30)).toLocaleDateString() //获取当前日期后加30天   
							let getEndTime = new Date(time);
							let endTime = Date.parse(getEndTime) / 1000
							if(presentTime > endTime){
								ele.isEnd = true
							}
							console.log(ele.isEnd,presentTime,endTime)
						}
						if(ele.goods.length){
							ele.goods.forEach((list)=>{
								if(list.goods_images){
									list.goods_images = list.goods_images.split(',')
								}
							})
						}else{
							ele.project.forEach((list)=>{
								if(list.project_images){
									list.project_images = list.project_images.split(',')
								}
							})
						}
						// console.log(76, ele.status, (((ele.time_out - (new Date().getTime())/1000) > 0)))
						if (ele.status === 1 && !(((ele.time_out - (new Date().getTime())/1000) > 0))) {
							this.$u.api.ordersCancel({orders_id: ele.id}).then(res =>{
								ele.status = 5 // 重置为已取消状态
							})
						}
					})
					console.log(this.orderList,"this.orderList")
					this.total = data.total;
					if (this.total <= this.orderList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			chiose(ele,index){
				this.type = ele.status
				this.activeIndex = index
				this.page = 1
				this.orderList=[]
				this.getOrderList()
			}
		}
	}
</script>

<style lang="scss" scoped >
.pages{
	width: 100%;
	height: 100%;
	background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
	background-repeat: no-repeat;
	background-size: cover;
}
.league{
	position: fixed;
	bottom: 100rpx;
	right: 20rpx;
	view{
		width: 110rpx;
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		background: linear-gradient(98deg, #50DCC2 0%, #007664 100%);
		border-radius: 50%;
		color: white;
	}
}
.addTime{
	margin-left: 20rpx;
	
}
.container{
	// width: 100%;
	height: 100%;
	// overflow-y: scroll;
	// background-image: url('https://jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg.png') !important;
	// background-repeat: no-repeat;
	// background-size: cover;
	// background: #F4F5F9;
	.content {
		padding: 50rpx 30rpx;
		overflow-y: scroll;
		height: 100%;
	}
	
	.noDate{
		width: 100%;
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			/* display: block; */
			margin-bottom: 78rpx;
			margin-top: 200rpx;
		}
	}
	.orderWrap{
		width:calc(750rpx - 64rpx);
		// min-height: calc(100vh - 132rpx);
		// position: absolute;
		// top: 132rpx;
		
		.item{
			padding: 0 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 43rpx;
			.operation{
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 10rpx;
				.left{
					color: #999999;
					font-size: 24rpx;
					text{
						color: #333333;
						font-size: 28rpx;
					}
				}
				.operationBtn{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					>view{
						margin-left: 20rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
					>view:nth-child(1){
						margin-left: 0rpx;
					}
					.goPay{
						width: 236rpx;
						line-height: 70rpx;
						background: #007664;
						border-radius: 6rpx;
					}
					.common{
						padding: 0 20rpx;
						line-height: 70rpx;
						background: linear-gradient(135deg, #50DCC2 0%, #007664);
						border-radius: 48rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
					}
					.border{
						background-color: #FFFFFF;
						color: white;
						border: 1rpx solid white;
					}
				}
				
			}
			.courierNumber{
				color: #999999;
				font-size: 24rpx;
				padding-bottom: 30rpx;
				margin-top: -20rpx;
			}
			.checkCode{
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999999;
				.stores{
					display: flex;
					margin-top: 15rpx;
					text{
						display: block;
						width: 120rpx;
					}
				}
			}
			.cacelDetails{
				padding:31rpx 0 32rpx 0;
				.cacelList{
					font-size: 24rpx;
					color: #999999;
					line-height: 26rpx;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					text{
						color: #333333;
						font-size: 24rpx;
						margin-left: 18rpx;
					}
				}
				.cacelList:last-child{
					margin-bottom: 0;
				}
			}
			.projectInfo{
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				padding: 32rpx 0;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				position: relative;
				>view{
					margin-bottom: 30rpx;
				}
				.left{
					display: flex;
					// align-items: center;
					margin-bottom: 30rpx;
					image{
						flex: none;
						width: 150rpx;
						height: 150rpx;
						border-radius: 8rpx;
						margin-right: 28rpx;
					}
					.info{
						position: relative;
						.extraTime{
							position: absolute;
							right: 0;
							bottom: 0;
							color: #007664;
							background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
							border-radius: 47rpx;
							padding: 5rpx 20rpx;
							color: white;
							font-size: 24rpx;
						}
						.itemName{
							font-size: 28rpx;
							color: #333333;
							width: 441rpx;
							overflow: hidden;    
							text-overflow:ellipsis;    
							white-space: nowrap;
						}
						.itemPrice{
							font-size: 32rpx;
							color: #007664;
							position: absolute;
							bottom: 0;
							text{
								font-size: 24rpx;
								margin-right: 5rpx;
							}
						}
						.pls{
							height: 76rpx;
							// border: 1rpx solid;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-wrap: wrap;
							font-size: 24rpx;
							color: #999999;
							view{
								width: 100%;
							}
						}
						.stores{
							font-size: 24rpx;
							color: #999999;
							line-height: 26rpx;
							margin: 16rpx 0 28rpx 0;
						}
						.bottom{
							position: absolute;
							right: 0;
							bottom: 60rpx;
							.num{
								color: #999999;
								font-size: 28rpx;
							}
						}
						.noBottom{
							margin-top: 36rpx;
						}
					}
				}
				>view:last-child{
					margin-bottom: 0;
				}
				.price{
					color: #007664;
					font-size: 30rpx;
				}
			}
			.vipInfo{
				padding: 44rpx 0 47rpx 0;
				.left{
					color: #333333;
					font-size: 24rpx;
					image{
						flex: none;
						width: 114rpx;
						height: 58rpx;
						border-radius: 6rpx;
						margin-right: 23rpx;
					}
				}
			}
			.head{
				display: flex;
				justify-content: space-between;
				height: 106rpx;
				align-items: center;
				border-bottom: 1rpx solid rgba(142,142,142,.24);
				.projectName{
					color: #333333;
					font-size: 32rpx;
				}
				.status{
					color: #007664;
					font-size: 24rpx;
					text{
						color: #666666;
						margin-right: 15rpx;
					}
				}
				.cecalStatus{
					color: #999999;
					font-size: 24rpx;
				}
			}
		}
	}
	.tabList{
		width:calc(750rpx - 64rpx);
		display: flex;
		justify-content: space-between;
		// position: fixed;
		// height: 132rpx;
		z-index: 999;
		// background-color: #F6F7FA;
		padding: 20rpx 0;
		box-sizing: border-box;
		.list{
			width: 118rpx;
			height: 52rpx;
			background: rgba(194,194,194,.1);
			border-radius: 68rpx;
			text-align: center;
			line-height: 52rpx;
			color: #666666;
			font-size: 24rpx;
		}
		.active{
		  background: rgba(136,29,3,.1);
		  color: #007664;
		}
	}

}
.mtc30{
	height: 550rpx !important;
}
.popupWrap{
	width: 640rpx;
	height: 720rpx;
	padding: 60rpx 32rpx 32rpx 32rpx;
	.returnList{
	  color: #333;
	  font-size: 30rpx;
	  margin-bottom: 26rpx;
	}
	textarea{
		width: 495rpx;
		height: 150rpx;
		border: 1rpx solid rgba(142,142,142,.23);
		border-radius: 8rpx;
		padding: 20rpx;
	}
	.button{
		width: 500rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(135deg, #50DCC2 0%, #007664);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 50rpx auto 0;
	}
}
	

::v-deep .u-countdown{
	margin-left: 10rpx;
}

.uniPls{
	position: relative;
	top: 2rpx;
}
.specification{
	height: 100%;
	background-color: #fff;
	position: relative;
	padding: 38rpx;
	.close{
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 20rpx;
		font-size: 44rpx;
		color: #8A8A8A;
	}
	.subimt{
		position: absolute;
		bottom: 40rpx;
		left: 0;
		width: 100%;
		display: flex;
		text-align: center;
		padding: 0rpx 40rpx 0 42rpx;
		.cancel{
			text-align: center;
			width: 331rpx;
			line-height: 96rpx;
			height: 96rpx;
			border: 1rpx solid #007664;
			border-radius: 47rpx;
			margin-right: 24rpx;
			color: #007664;
			font-size: 32rpx;
		}
		.confirm{
			text-align: center;
			color: white;
			font-size: 32rpx;
			width: 331rpx;
			line-height: 96rpx;
			height: 96rpx;
			background: linear-gradient( 98deg, #50DCC2 0%, #007664 100%);
			border-radius: 47rpx;
		}
	}
	.main{
		position: relative;
		margin-bottom: 150rpx;
		&__header{
			font-size: 32rpx;
			color: #393C42;
			font-weight: bold;
			margin-top: -5rpx;
			margin-bottom: 40rpx;
		}
		&__tou{
			font-size: 26rpx;
			color: #393C42;
			margin-top: 20rpx;
		}
	}

}

</style>
<style >
page{
	/* background-color: #F6F7FA; */
}
</style>
